<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>animation</view>
				<view>Boolean</view>
				<view>true</view>
				<view>开启过渡动画</view>
			</view>
			<view class="tr">
				<view>animationMode</view>
				<view>String</view>
				<view>无</view>
				<view>自定义动画类型。
					<text class="color-error">只能在popup-trans使用</text>
				</view>
			</view>
			<view class="tr">
				<view>point</view>
				<view>String</view>
				<view>center</view>
				<view>弹出位置，可选top、center（默认）、bottom、left、right</view>
			</view>
			<view class="tr">
				<view>useMask</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用遮罩</view>
			</view>
			<view class="tr">
				<view>maskClick</view>
				<view>Boolean</view>
				<view>true</view>
				<view>点击遮罩关闭</view>
			</view>
			<view class="tr">
				<view>bgColor</view>
				<view>String</view>
				<view>#fff</view>
				<view>内容区背景色</view>
			</view>
			<view class="tr">
				<view>maskBgColor</view>
				<view>String</view>
				<view>无</view>
				<view>遮罩背景色</view>
			</view>
			<view class="tr">
				<view>safeAreaTop</view>
				<view>Boolean, Number</view>
				<view>500</view>
				<view>适配顶部安全区域（留出默认头部导航条距离，仅H5需要），true：一直适配。false：一直关闭。数字：窗口宽高均小于数字时适配，否则关闭</view>
			</view>
			<view class="tr">
				<view>safeAreaBottom</view>
				<view>Boolean</view>
				<view>true</view>
				<view>适配底部安全区域（留出默认底部tab导航距离）</view>
			</view>
			<view class="tr">
				<view>zIndex</view>
				<view>Number</view>
				<view>99</view>
				<view>手动指定层级数</view>
			</view>
			<view class="tr">
				<view>width</view>
				<view>String</view>
				<view>无</view>
				<view>内容板块宽，需带单位。top、bottom默认宽100%；left、right默认无宽度，需内容自带宽，<text class="color-error">百分比将转换为vw</text>。</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>String</view>
				<view>无</view>
				<view>内容板块高，需带单位。left、right默认高100%；top、bottom默认无高度，需内容自带高，<text class="color-error">百分比将转换为vh</text>。</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>Number, String, Array</view>
				<view>0</view>
				<view>外框圆角，需带单位。类型为top、center、bottom时有效</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>shift</view>
					<view>Object</view>
					<view>无</view>
					<view>手动偏移，限制popup的显示区，独立于safeArea设置，用于自定义导航及自定义tab栏等。可带单位，默认单位px。间隙部分会观测到动画断层，还需配合zIndex让外层内容遮住间隙部分。状态栏的占位计算应在外部执行</view>
				</view>
				<view class="appendix">
					<view>格式：{left:0, right:0, top:0, bottom:0}</view>
				</view>
			</view>
			<view class="tr">
				<view>useClickLock</view>
				<view>Boolean</view>
				<view>true</view>
				<view>点击锁，动画完成前重复点击无效</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view>	</view>
				<view>窗口状态变更事件，提交对象参数，包含show当前状态，point窗口方向</view>
			</view>
			<view class="tr">
				<view>@maskClick</view>
				<view>事件</view>
				<view>	</view>
				<view>遮罩点击事件，无提交参数</view>
			</view>
			<view class="tr">
				<view>@opened</view>
				<view>事件</view>
				<view>	</view>
				<view>内容打开完毕事件，无提交参数</view>
			</view>
			<view class="tr">
				<view>@closed</view>
				<view>事件</view>
				<view>	</view>
				<view>内容关闭完毕事件，无提交参数</view>
			</view>
			<view class="tr">
				<view>open</view>
				<view>function</view>
				<view>	</view>
				<view>使用refs调用，打开窗口。两个可选参数，第一参数字符串，窗口打开方向，同point。第二参数动画类型，取自transition组件actions.js内定义类</view>
			</view>
			<view class="tr">
				<view>close</view>
				<view>function</view>
				<view>	</view>
				<view>使用refs调用，关闭窗口</view>
			</view>
			<view class="tr">
				<view>openMask</view>
				<view>function</view>
				<view>	</view>
				<view>使用refs调用，打开遮罩。前提条件useMask为true</view>
			</view>
			<view class="tr">
				<view>closeMask</view>
				<view>function</view>
				<view>	</view>
				<view>使用refs调用，关闭遮罩</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm color-error">
				为彻底解决transform造成的fixed定位无法跳出父窗口问题，组件已分为css实现与transition实现（vi-popup-trans）。自定义动画功能只能在popup-trans使用。需注意，动画仍使用transform实现，动画运行期间无法跳出父窗口。
			</view>
			<view class="py-sm">
				基本使用：
				<view class="">
					{{"&lt;vi-popup ref='组件id'>内容&lt;/vi-popup>"}}
				</view>
				使用refs调用组件的open方法打开
				<view class="mt-sm">
					使用自定义动画须actions.js存在动画定义，注意与窗口方向的组合
				</view>
			</view>
			<view class="py-sm">
				<vi-popup ref="demo1">
					<view class="p-md">
						默认中部弹窗
					</view>
				</vi-popup>
				<vi-button @click="openWin('demo1')">默认</vi-button>
			</view>
			<view class="py-sm">
				<vi-popup ref="demo2" point="left" :shift="shiftTop">
					<view class="p-md">
						左侧内容
					</view>
				</vi-popup>
				<vi-button @click="openWin('demo2')">左弹窗</vi-button>
			</view>
			<view class="py-sm">
				<vi-popup ref="demo3" point="right" :shift="shiftTop">
					<view class="p-md">
						右侧内容
					</view>
				</vi-popup>
				<vi-button @click="openWin('demo3')">右弹窗</vi-button>
			</view>
			<view class="py-sm">
				<vi-popup ref="demo4" point="top" :shift="shiftTop">
					<view class="p-md">
						顶部内容
					</view>
				</vi-popup>
				<vi-button @click="openWin('demo4')">上弹窗</vi-button>
			</view>
			<view class="py-sm">
				<vi-popup ref="demo5" point="bottom">
					<view class="p-md">
						底部内容
					</view>
				</vi-popup>
				<vi-button @click="openWin('demo5')">下弹窗</vi-button>
			</view>
			<view class="py-sm">
				<vi-popup ref="demo6" point="bottom" :shift="shiftTop">
					<view class="p-md">
						随机方向
					</view>
				</vi-popup>
				<vi-button @click="randomOpen('demo6')">open传入方向参数</vi-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				random:"",
			}
		},
		methods: {
			randomOpen(handle){
				let direction = ["left","right","top","bottom","center"];
				let idx = Math.round(Math.random()*4);
				this.random = direction[idx];
				this.$refs[handle].open({point:this.random});
			}
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
